// 形象进度变更

<template>
    <f7-page class="change">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back
                         icon-material="arrow_back"></f7-link>
            </f7-nav-left>
            <f7-nav-title>形象进度</f7-nav-title>
            <f7-nav-right>
                <f7-icon f7="house"
                         @click.native="fnToHome()"></f7-icon>
            </f7-nav-right>
        </f7-navbar>

        <van-notice-bar background="#fff"
                        color="#345">
            <f7-icon solt="left-icon"
                     color="#3385ff"
                     f7="layers_alt_fill"></f7-icon>
            <span>{{controlData.engineeInfo.engineeName}}</span>
        </van-notice-bar>

        <f7-list media-list>
            <f7-list-item>
                <div class="list-item-content">
                    <label>当前所处施工阶段</label>
                    <span @click="show = true">请选择<f7-icon f7="chevron_down"></f7-icon></span>
                </div>
                <div class="checks">
                    <span class="select-item"
                          v-for="(item, index) in checkItems"
                          :key="index"
                          @click="fnDelete(index)">
                        {{item.code | DictItem(controlData.progressEnums)}}<f7-icon f7="xmark"></f7-icon>
                    </span>
                </div>
            </f7-list-item>
        </f7-list>

        <!-- 弹出的选择 -->
        <v-popup-picker-btn v-model="show"
                            title="请选择当前所处施工阶段"
                            :arr="arr"
                            :check="check"
                            @btn:click="emitBtnClick">
        </v-popup-picker-btn>
        <!-- 弹出的选择 end -->

        <f7-list media-list>
            <f7-list-item>
                <div class="list-item-content">
                    <label>详情描述</label>
                </div>
                <van-field v-model="models.model.content"
                           type="textarea"
                           placeholder="请输入当前施工阶段详情信息" />
            </f7-list-item>
        </f7-list>

        <f7-list media-list>
            <f7-list-item>
                <div class="list-item-content">
                    <label>现场图片</label>
                </div>
                <f7-picture-upload ref="progress"
                                   :params="{type:'attach',dataKey: models.model.caseId, bizType: 'progress'}"></f7-picture-upload>
            </f7-list-item>
        </f7-list>

        <f7-toolbar position="bottom"
                    v-has="'project:progress:save'"
                    no-shadow
                    class="fff">
            <f7-button fill
                       class="submit-btn"
                       @click="fnSubmit()">提交</f7-button>
        </f7-toolbar>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/workflowController"

export default class instance extends controller {
    onBeforeInit () {
        this.urls = {
            model: "/project/progress/getWorkflowViewModel"
        }
    }
    onAfterQuery (type, isSuccess, result) {
        if (type == 'form' && isSuccess) {
            let { controlData } = result

            this.$data.arr = controlData.progressEnums || []
        }

        return result
    }
    mixin () {
        return {
            data () {
                return {
                    show: false,
                    show1: false,
                    // 选项数据
                    arr: [],
                    // 选中code
                    check: [],
                    // 选中arr的item
                    checkItems: [],
                    controlData: {
                        // 形象进度枚举
                        progressEnums: [],
                        // 项目信息
                        engineeInfo: {}
                    },
                    models: {
                        model: {}
                    },
                    selectUser: {
                        selectComment: null,
                        comment: null,
                        comments: [],
                        tran: [],
                        activity: "",
                        users: [],
                    }
                }
            },
            methods: {
                fnSubmit () {
                    if (this.checkItems.length == 0) {
                        this.$toast("请选择当前所处施工阶段")
                        return false
                    }

                    if (!this.models.model.content) {
                        this.$toast('请输入当前施工阶段详情信息')
                        return false
                    }

                    if (this.$refs.progress.getUploadedCount() < 1) {
                        this.$toast("请上传现场图片")
                        return false
                    }

                    let arrName = this.checkItems.map(item => item.name)

                    this.models.model.progressCode = this.check.join(',')
                    this.models.model.progressName = arrName.join(',')

                    this.send()
                },
                // 删除选择
                fnDelete (index) {
                    this.check.splice(index, 1)
                    this.checkItems.splice(index, 1)
                },
                emitBtnClick (data) {
                    this.checkItems = data.checkItems
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
@deep: ~">>>";

.change {
    .submit-btn {
        flex: 1;
        margin: 0 10px;
    }

    .list {
        margin: 10px 0;

        @{deep}.pic_upload {
            padding: 0;
        }
    }

    .list-item-content {
        display: flex;
        font-size: 14px;
        justify-content: space-between;
        align-items: center;

        > label {
            width: 38%;
            line-height: 18px;
            padding: 10px 0;
        }

        .f7-icons {
            font-size: 16px;
        }
    }

    @{deep}.van-field {
        padding: 0;

        .van-field__control {
            font-size: 14px;
        }
    }

    .checks {
        display: flex;
        flex-wrap: wrap;

        span.select-item {
            font-size: 14px;
            font-weight: 400;
            color: #3385ff;
            line-height: 20px;
            background: #eff6ff;
            border-radius: 4px;
            padding: 8px 15px;
            margin: 0 10px 12px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .f7-icons {
                font-size: 12px;
                color: #3385ff;
                margin-left: 10px;
            }
        }
    }
}
</style>
